<template>
  <div class="boxCard">
    <el-card class="box-card">
      <div class="title">
        <span />
        <p>查询条件</p>
      </div>
      <el-form label-width="120px">
        <el-row :gutter="12">
          <el-col :span="6">
            <el-form-item label="字典名称: ">
              <el-input
                v-model="seachObj.userName"
                placeholder="请输入字典名称"
              />
            </el-form-item>
          </el-col>

          <el-col :span="18" style="text-align: right">
            <el-button type="primary" @click="getInit(1)">查询</el-button>
            <el-button @click="rest">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card class="box-card" style="width: 100%; height: 80%">
      <div class="header">
        <div class="title">
          <span />
          <p>字典列表</p>
        </div>

        <div>
          <el-button type="primary" size="small" @click="showAddForm"
            >新增</el-button
          >
        </div>
      </div>

      <TableView
        :data-list="dataList"
        :loading="loading"
        :total="seachObj.total"
        :size="seachObj.size"
        :page="seachObj.page"
        @pagination="pagination"
      >
        <div slot="column">
          <el-table-column
            label="字典名称"
            align="center"
            prop="dataBaseName"
            width="150"
          >
          </el-table-column>
          <el-table-column
            label="字典标识"
            align="center"
            prop="dataBaseCode"
            width="150"
          >
            <template slot-scope="scope">
              <el-button type="text" @click="shouDatabaseDialog(scope.row)">{{
                scope.row.dataBaseCode
              }}</el-button>
            </template>
          </el-table-column>

          <el-table-column
            label="创建时间"
            align="center"
            prop="createTime"
            width="200"
          />

          <el-table-column label="状态" align="center" prop="state" width="150">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.state == '1'">正常</el-tag>
              <el-tag type="danger" v-if="scope.row.state == '0'">停用</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="备注" align="center" prop="remark" />

          <el-table-column
            label="操作"
            align="center"
            width="120"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button type="text" @click="updateData(scope.row)"
                >修改</el-button
              >
              <el-button type="text" @click="del(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </div>
      </TableView>
    </el-card>

    <!-- 新增弹出框 -->
    <el-dialog title="新增字典" :visible.sync="dialogTableVisible">
      <el-form ref="addFrom" label-width="120px" :model="addObj" :rules="rules">
        <el-row :gutter="12">
          <el-col :span="24">
            <el-form-item label="字典名称: ">
              <el-input
                v-model="addObj.dataBaseName"
                placeholder="请输字典名称"
              />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="字典标识: ">
              <el-input
                v-model="addObj.dataBaseCode"
                placeholder="请输入字典标识"
              />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="状态: ">
              <el-radio-group v-model="addObj.state">
                <el-radio :label="'1'">正常</el-radio>
                <el-radio :label="'0'">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="备注: ">
              <el-input
                v-model="addObj.remark"
                placeholder="请输入备注"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4 }"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div style="margin-top: 10px; text-align: center">
        <el-button type="primary" @click="confirm">确定</el-button>
        <el-button @click="dialogTableVisible = false">取消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="字典项" :visible.sync="databaseDialog" width="80%">
      <el-button type="primary" @click="addDatabase">新增</el-button>
      <div style="height: 20px"></div>
      <TableView
        :data-list="databaseList"
        :loading="loading1"
        :showPagination="false"
      >
        <div slot="column">
          <el-table-column label="字典标识" align="center" prop="dataBaseCode">
          </el-table-column>

          <el-table-column label="数据标签" align="center" prop="name">
            <template slot-scope="scope">
              <span v-if="!scope.row.flag">{{ scope.row.name }}</span>
              <el-input
                v-else
                v-model="scope.row.name"
                placeholder="请输入数据标签"
              ></el-input>
            </template>
          </el-table-column>

          <el-table-column label="数据键值" align="center" prop="code">
            <template slot-scope="scope">
              <span v-if="!scope.row.flag">{{ scope.row.code }}</span>
              <el-input
                v-else
                v-model="scope.row.code"
                placeholder="请输入数据键值"
              ></el-input>
            </template>
          </el-table-column>

          <el-table-column
            label="状态"
            align="center"
            prop="dataBaseCode"
            width="150"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.state"
                active-color="#1CD66C"
                inactive-color="#909399"
              >
              </el-switch>
            </template>
          </el-table-column>

          <el-table-column label="创建时间" align="center" prop="createTime">
            <template slot-scope="scope">
              <span>{{ scope.row.createTime || "---" }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            align="center"
            width="120"
            fixed="right"
          >
            <template slot-scope="scope">
              <div v-if="!scope.row.flag">
                <el-button type="text" @click="scope.row.flag = true"
                  >修改</el-button
                >
                <el-button type="text" @click="delItem(scope.row)"
                  >删除</el-button
                >
              </div>

              <div v-else>
                <el-button type="text" @click="accomplish(scope.row)"
                  >完成</el-button
                >
              </div>
            </template>
          </el-table-column>
        </div>
      </TableView>

      <div style="margin-top: 10px; text-align: center">
        <el-button @click="databaseDialog = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import uploadFile from "@/components/uploadFile";
import TableView from "@/components/TableView/index.vue";
import {
  addDataDictionary,
  addDictionaryItem,
  delDataDictionary,
  delDictionaryItem,
  getDataDictionary,
  getDictionaryItem,
} from "@/api/database";
export default {
  data() {
    return {
      seachObj: {
        page: 1,
        size: 10,
        total: 0,
      },
      dataList: [],
      loading: false,
      loading1: false,
      dialogTableVisible: false,

      addObj: {
        state: "1",
      },

      rules: {},

      databaseDialog: false,
      databaseList: [],
      current_dictionary: "",
    };
  },

  components: {
    uploadFile,
    TableView,
  },

  mounted() {
    this.getInit();
  },

  methods: {
    async getInit(page) {
      this.seachObj.page = page || this.seachObj.page;
      this.loading = true;
      const res = await getDataDictionary(this.seachObj);
      this.loading = false;
      console.log(res);
      if (res.code == 20000) {
        this.dataList = res.data || [];
        this.seachObj.total = res.total;
      } else {
        this.$message.error(res.msg);
      }
    },

    // 重置按钮
    rest() {
      this.seachObj = {};
      this.getInit();
    },

    // 点击新增按钮
    showAddForm() {
      this.dialogTableVisible = true;
      this.addObj = {
        state: "1",
      };
    },

    // 点击修改按钮
    updateData(row) {
      this.dialogTableVisible = true;
      this.addObj = JSON.parse(JSON.stringify(row));
    },

    // 点击确定按钮
    confirm() {
      // 表单校验
      this.$refs.addFrom.validate(async (valid) => {
        if (valid) {
          this.$confirm("确定保存这个字典吗？", "提示", {
            cancelButtonText: "取消",
            confirmButtonText: "确定",
            type: "warning",
          }).then(async () => {
            const result = await addDataDictionary(this.addObj);
            if (result.code == 20000) {
              this.$message.success("保存成功");
              this.getInit();
            } else {
              this.$message.error(result.msg);
            }
            this.dialogTableVisible = false;
          });
        }
      });
    },

    // 删除
    del(row) {
      this.$confirm("确定删除吗？", "提示", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        type: "warning",
      }).then(async () => {
        console.log(row.id);
        const result = await delDataDictionary({ id: row.id });
        if (result.code == 20000) {
          this.$message.success("删除成功");
          this.getInit();
        } else {
          this.$message.error(result.msg);
        }
      });
    },

    // 删除字典序
    delItem(row) {
      this.$confirm("确定删除吗？", "提示", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        type: "warning",
      }).then(async () => {
        console.log(row.id);
        const result = await delDictionaryItem({ id: row.id });
        if (result.code == 20000) {
          this.$message.success("删除成功");
          this.getDatabase();
        } else {
          this.$message.error(result.msg);
        }
      });
    },

    shouDatabaseDialog(row) {
      this.databaseDialog = true;
      this.current_dictionary = row.dataBaseCode;
      this.getDatabase();
    },

    // 新增数据字典
    addDatabase() {
      this.databaseList.push({
        state: true,
        dataBaseCode: this.current_dictionary,
        flag: true,
      });
    },

    // 点击完成
    accomplish(row) {
      this.$confirm("确定保存这个字典吗？", "提示", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        type: "warning",
      }).then(async () => {
        console.log(row);
        if (!row.name) {
          this.$message.warning("数据标签不能为空");
          return;
        }
        if (!row.code) {
          this.$message.warning("数据键值不能为空");
          return;
        }
        row.flag = false;
        const result = await addDictionaryItem(row);
        if (result.code == 20000) {
          this.$message.success("保存成功");
        } else {
          this.$message.error(result.msg);
        }
        this.dialogTableVisible = false;
      });
    },

    // 获取字典项
    async getDatabase() {
      this.loading1 = true;
      const res = await getDictionaryItem({
        page: 1,
        size: 1000,
        dataBaseCode: this.current_dictionary,
      });
      this.loading1 = false;
      if (res.code == 20000) {
        this.databaseList = res.data || [];
      } else {
        this.$message.error(res.msg);
      }
    },

    // 分页相关
    pagination(e) {
      console.log("分页", e);
      this.seachObj.page = e.page;
      this.seachObj.size = e.size;
      this.getInit();
    },
  },
};
</script>

<style scoped>
>>> .el-card__body {
  padding: 20px;
  width: 100%;
  height: 100%;
}

.imageClass {
  width: 300px;
  border-radius: 10px;
}
</style>
